列表資料綁定v-for:
是 Vue.js 中用於渲染列表的一个指令，可以在HTML Element的屬性中使用。
列表資料類型可以是Array或Object。
範例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Example</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items" v-bind:key="index">
{{ index }}: {{ item }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="app.js"></script>
</body>
</html>
1.v-for:v-for="(item, index) in items"是Vue.js中v-for指令的語法。用來遍歷陣列或者物件。在語法中，item 代表陣列或物件中的每一個的值，index 則代表索引值。
2.key: v-bind:key="index"的簡寫是 :key="index"，為了協助陣列或物件屬性有變化時，可以更精準的對有變化的重新渲染。這樣的寫法能夠讓我們在Vue.js應用中更靈活地處理循環渲染的需求，同時也提升了頁面的性能。
new Vue({
el: '#app',
data: {
items: ['蘋果', '香蕉', '草莓', '葡萄']
}
});
呈現畫面:
顯示與隱藏控制v-show:
想要在 Vue.js 中控制元素的顯示與隱藏時，可以使用 v-show 指令。
這個指令可以控制元素的顯示或隱藏。
範例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
</head>
<body>
<div id="app">
<button @click="toggleImage">切換圖片顯示</button>
<img v-show="showImage" src="https://i.postimg.cc/8zbpbdvv/image.jpg" alt="圖片">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="app.js"></script>
</body>
</html>
在 HTML 檔案中，我們建了一個按鈕和一張圖片。
當按鈕被點擊時，它會呼叫 toggleImage 方法以切換圖片的顯示狀態。
圖片使用了 v-show 指令，它會根據 showImage 的值來動態控制顯示和隱藏。
new Vue({
el: '#app',
data: {
showImage: true
},
methods: {
toggleImage() {
this.showImage = !this.showImage;
}
}
});
定義了一個名為 showImage 的資料屬性，並將其初始值設為 true，代表圖片一開始是可見的。
toggleImage 資料屬性，會在按鈕點擊時被呼叫，去切換 showImage 的值，控制圖片的顯示和隱藏。
一開始畫面:
按下按鈕後:
iThome鐵人賽
看影片追技術